<template>
  <border
    class="talent-introduction"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <pie ref="pie"
           :isUseValue="pieConfig.isUseValue"
           :value="pieConfig.pieData"
           :pieLegend="pieConfig.legend"
           :labelLine="pieConfig.labelLine"
           :limitLength="pieConfig.limitLength"
           :pieType="pieType"
           :notOther="pieConfig.notOther"
           :labelShow="pieConfig.labelShow"
           :seriesRadius="seriesRadius"
           :isUseComputedLine="pieConfig.isUseComputedLine"></pie>
      <div class="legend">
        <div class="legend-li" v-for="(item, index) in pieConfig.legend" :key="index" :class="{'hide-legend-li': index > 5}">
          <div class="legend-li-content"  v-if="index < pieConfig.limitLength - 1">
            <i :style="{'background': pieConfig.pieColor[index]}"></i>
            <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
          </div>
          <div class="legend-li-content" v-else-if="index == pieConfig.limitLength - 1">
            <i :style="{'background': pieConfig.pieColor[index]}"></i>
            <span>{{ pieConfig.legend.length === 5 ?item.length > 4 ? item.substring(0, 4) : item : '其他' }}</span>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Pie from './../components/Pie.vue'
export default {
  name: 'talentIntroduction',
  components: {
    Border,
    Pie
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '企业人才引进',
        goPageUrl: ''
      },
      pieConfig: {
        legend: [],
        pieColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022', '#8c70f8', '#cadfea', '#f59233'],
        pieData: [],
        limitLength: 5,
        notOther: 'notOther',
        isUseValue: true,
        labelShow: true,
        labelLine: {
          normal: {
            length: 10,
            length2: 10
          }
        },
        isUseComputedLine: false
      },
      refreshInterval: 0
    }
  },
  computed: {
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']] : [['35%', '55%']]
    },
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.parkApi.ratio({ organId: this.organId, chartLabel: '2' }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
          } else {
            this.apiData = {}
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let seriesData = []
      let xData = []
      if (JSON.stringify(data) !== '{}') {
        data.list.forEach(item => {
          xData.push(item.name)
          seriesData.push(parseInt(item.value))
        })
      }
      this.pieConfig.legend = xData
      this.pieConfig.pieData = seriesData
    },
    resizeChart () {
      this.$refs.pie.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.talentIntroductionTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.talentIntroductionTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.talentIntroductionTimer)
  }
}
</script>
<style lang="scss" scoped>
.talent-introduction {
  .module-content {
    width: 100%;
    height: 100%;
    .pie {
      width: 100%;
      height: 80%;
    }
    .legend {
      width: 68%;
      margin-left: 16%;
      height: 20%;
      text-align: center;
      .legend-li {
        display: inline-block;
        padding: 3px 10px;
        overflow: hidden;
        text-align: left;
        &.hide-legend-li {
          display: none;
        }
        &:last-of-type {
          margin: 0;
        }
        i {
          display: block;
          float: left;
          width: 12px;
          height: 12px;
          vertical-align: top;
          margin: 1px 5px 0 0;
        }
        span {
          font-size: 12px;
          color: #A4B3C7;
          line-height: 14px;
          display: inline-block;
        }
      }
    }
  }
}
</style>
